<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>遮罩层</title>
    <style>
        .box{
            width: 500px;
            height: 750px;
            background-color: lightgray;
            margin: 50px auto;
            
        }
        *{
            box-sizing: border-box;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .first-img{
            width: 400px;
            height: 500px;
            background-color: white;
            margin: 0 auto;
            position: relative;
            top: 10px;
            
        }
        .show{
            width: 400px;
            height: 500px;
            position: absolute;
            border: 5px solid sandybrown;
            top: 0px;
            left: 0px; 
            /* opacity: 0; */
            display: none; 
            /* z-index: -1; */
        }
        .first-img img{
            padding: 15px;
            padding-bottom: 0;

        }
        .first-img p{
            font-size: 13px;
            text-indent: 1em;
            padding: 0 15px;
            
        }
        .second{
            width: 400px;
            height: 200px;
            background-color: white;
            margin: 0 auto;
            margin-top: 20px;
            
        }
        .second li{
            float: left;
            padding:  12px 15px;
            position: relative;
        }
  
        .active{
            width: 170px;
            height: 170px;
            position: absolute;
            background-color: black;
            opacity: 0;
            top: 12px;
            
        }
        .active-two{
            width: 170px;
            height: 170px;
            position: absolute;
            top: 12px;
            left: -20px;
            display: none; 
            color: white;
            /* opacity: 0; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first-img">
            <img src="./img/QQ图片20170817192040.jpg" alt="">
            <p>[金熹]设计上运用了多片层叠设计，形成立体倒放的花苞视觉效果，创意独特。浓烈的印花明快的色彩勾勒出美妙的夏日异国情调，优质的雪纺面料让小衫更显质感，穿着凉爽透气，做工也相当讲究</p>
            <div class="show"></div>
        </div>
        
        <ul class="second">
                <li><img src="./img/QQ图片20170817193200.jpg" alt="">
                <div class="active"></div>
                <p class="active-two">special旗舰店<br><br>最具传奇浪漫色彩的欧洲经典设计，给你带来专属的魅力</p>
                </li>
                <li><img src="./img/QQ图片20170817193213.jpg" alt="">
                    <div class="active"></div>
                    <p class="active-two">special旗舰店<br><br>最具传奇浪漫色彩的欧洲经典设计，给你带来专属的魅力</p>
                    
                </li>
                

        </ul>
    </div>
</body>
<script src="./jquery.min.js"></script>
<script>
    $('.first-img').hover(function(){
        $('.show').fadeTo(1000,1);
    },function(){
         $('.show').fadeTo(1000,0);
    })
   
    $('.second li').hover(function(){
        // console.log(this);
        $('.active').eq($(this).index()).stop(false, true).fadeTo(500,0.5);
        $('.active-two').eq($(this).index()).stop(false, true).fadeTo(200,1);
        $('.active-two').eq($(this).index()).stop(false, true).animate({left:18},500)
    },function(){
        $('.active').eq($(this).index()).stop(false, true).fadeTo(500,0);
        $('.active-two').eq($(this).index()).stop(false, true).fadeTo(200,0);
        $('.active-two').eq($(this).index()).stop(false, true).animate({left:-20},500)
    })
</script>
</html>